<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
</style>
<template>
    <div style="height:100%">
        <div class="login" v-if="!getHasGetInfo" style="padding-top:200px">
            <div class="login-con" style="width: 300px; margin:0 auto;">
            <Card icon="log-in" title="欢迎登录" :bordered="true">
                <div class="form-con">
                <Input prefix="ios-person" placeholder="输入用户名" style="width: 270px;margin-bottom: 15px" v-model="uName"/>
                <Input prefix="ios-lock" type="password" placeholder="输入密码" style="width: 270px;margin-bottom: 15px" v-model="passWd"/>
                <Button type="success" long style="margin-bottom: 15px" @click="userlogin" to="/">登录</Button>
                <p class="login-tip">输入任意用户名和密码即可</p>
                </div>
            </Card>
            </div>
        </div>
        <div class="layout" style="height:100%" v-else>
            <Layout style="height:100%">
                <Header >
                    <Menu mode="horizontal" theme="dark">
                        <div class="layout-logo"></div>
                        <div class="layout-nav" style="margin-right:-150px">
                            <MenuItem name="3">
                                <p>{{uName}}，欢迎您！</p>
                            </MenuItem>
                            <MenuItem name="4">
                                <Button type="primary" style="" @click="quit" to="/">退出登录</Button>
                            </MenuItem>
                        </div>
                    </Menu>
                </Header>

                <Layout>
                    <Sider hide-trigger :style="{background: '#fff'}">
                        <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                            <Submenu name="1">
                                <template slot="title">
                                    <Icon type="ios-navigate"></Icon>
                                用户模块
                                </template>
                                <MenuItem name="1-1" to="/user">用户管理</MenuItem>
                            
                            </Submenu>
                            <Submenu name="2">
                                <template slot="title">
                                    <Icon type="ios-keypad"></Icon>
                                    产品模块
                                </template>
                                <MenuItem name="2-1" to="/product">产品管理</MenuItem>
                            </Submenu>
                            <Submenu name="3">
                                <template slot="title">
                                    <Icon type="ios-analytics"></Icon>
                                    新闻模块
                                </template>
                                <MenuItem name="3-1" to="/news">新闻管理</MenuItem>
                            </Submenu>
                            <Submenu name="4">
                                <template slot="title">
                                    <Icon type="ios-analytics"></Icon>
                                    分类模块
                                </template>
                                <MenuItem name="4-1" to="/cate">分类管理</MenuItem>
                            </Submenu>
                            <Submenu name="5">
                                <template slot="title">
                                    <Icon type="ios-analytics"></Icon>
                                    上传模块
                                </template>
                                <MenuItem name="5-1" to="/upload">上传管理</MenuItem>
                            </Submenu>
                        </Menu>
                    </Sider>
                    <router-view name="newscate"></router-view>
                    <Layout >
                        <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                            <router-view></router-view>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        </div>
    </div>
</template>
<script>
import { mapGetters,mapActions } from "vuex";
export default {
  data() {
    return {
      host: "http://10.31.156.62:3000",
      uName: "",
      passWd:''
    };
  },
  components: {},
  methods: {
    ...mapActions(['change']),
    userlogin() {
      if (this.uName != ""&&this.passWd!="") {
        this.axios({
          url: `${this.host}/users/list`,
          method: "post",
          data: {
            name: this.uName
          }
        }).then(res => {
          if (res.data.rows.length > 0) {
            this.change(true)
            this.$cookie.set('username',this.uName,{expires:7})
            
          } else {
            this.$store.state.hasGetInfo = false;
          }
        });
      } else {
          this.$Message.error('用户名/密码不能为空')
      }
    },
    quit(){
        this.uName=''
        this.passWd=''
        this.change(false)
        this.$cookie.delete('username');
        this.$router.push({path: '/'});
    }
  },
  computed: {
    ...mapGetters(["getHasGetInfo"])
    
  },
  mounted(){
        this.uName=this.$cookie.get('username')
        if(this.$cookie.get('username')){
            this.change(true)
        }
  }
};
</script>
